<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      outline: none;
    }

    table {
      margin: 10px auto;
    }

    table thead tr {
      height: 30px;
    }

    table thead tr:nth-of-type(n+2) td {
      background: salmon;
    }

    table thead tr:nth-of-type(2) td input {
      width: 70px;
      border: none;
      background: none;
      border-bottom: 1px solid blue;
      font-size: 1rem;
      margin-left: 1px;
      padding-left: 2px;
    }

    table thead tr:nth-of-type(2) td:nth-of-type(3) {
      cursor: pointer;
    }

    table thead tr:nth-of-type(3) td {
      text-align: center;
      vertical-align: center;
    }

    table tbody tr {
      height: 30px;
    }

    table tbody tr td {
      width: 110px;
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="app">
    <table border="1" cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th colspan="4">图书管理</th>
        </tr>
        <tr>
          <td>编号:<input type="text" id="id" v-model="id" v-focus></td>
          <td>名称:<input type="text" id="uname" v-model="uname"></td>
          <td colspan="2" align="center" @click="add">{{submilt}}</td>
        </tr>
        <tr>
          <td>编号</td>
          <td>名称</td>
          <td>时间</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="items in list" :key="items.id">
          <td>{{items.id}}</td>
          <td>{{items.uname}}</td>
          <td>{{items.date}}</td>
          <td>
            <span @click="czEdit(items.id)">修改</span>|
            <span @click="czDel(items.id)">删除</span>
          </td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="4" align="center">总数:{{sum}}</td>
        </tr>
      </tfoot>
    </table>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const vm = new Vue({
      "el": "#app",
      "data": {
        "submilt": "提交",
        "id": "",
        "uname": "",
        "list": [{
          "id": 1,
          "uname": "水浒传",
          "date": ""
        }, {
          "id": 2,
          "uname": "三国演义",
          "date": ""
        }, {
          "id": 3,
          "uname": "西游记",
          "date": ""
        }]
      },
      mounted() {
        
      },
      updated() {},
      "methods": {
        add() {
          if (this.id != "" && this.uname != "") {
            this.list.push({
              "id": this.id,
              "uname": this.uname,
              "date": ""
            });
            this.id = "";
            this.uname = "";
          };
        },
        czEdit(id) {
          let listFilter = this.list.filter((items) => { //筛选出符合条件的对象
            return items.id == id;
          });
          listFilter[0].id = this.id;
          listFilter[0].uname = this.uname;
          this.id = "";
          this.uname = "";
        },
        czDel(id) {
          /* let index = this.list.findIndex((items) => { //根据id从数组中查找元素的索引
            return items.id == id;
          });
          this.list.splice(index, 1); */
          // -----------------------------------
          // 使用filter来删除数据
          this.list = this.list.filter((items) => {
            return items.id != id; //查找出不等于的所有值，然后再赋值给原来的数组
          });
        }
      },
      "directives": {
        "focus": {
          inserted(el) {
            el.focus();
          }
        }
      },
      "computed": {
        sum() {
          return this.list.length;
        }
      },
      "watch": {
        uname(val) { //验证图书名称是否已经存在了
          let flag = this.list.some((items) => {
            return items.uname == val;
          });
          if (flag) {
            this.submilt = "已经存在";
          } else {
            this.submilt = "提交";
          };
        }
      },
      "filters": {}
    });
  </script>
  <!--
    数组相关的API 
      1.变异的方法(修改原有的数组)
        push()
        pop()
        shift()
        unshift()
        splice()
        sort()
        reverse()
      2.替换数组(生成新的数组)
        filter()
        concat()
        slice()
   -->
  <!-- 
     修改响应式数据的方法
        Vue.set(vm.items,indexOfltem,newValue)
        vm.$set(vm.items,indexOfltem,newValue)
          1.参数一表示要处理的数组名称
          2.参数二表示要处理的素组的索引值
          3.参数三表示要处理的数组的值
        例如: Vue.set(vm.list,2,"hellow")
    -->
</body>

</html>